使用 Webpack 打造 vue - todo 应用实践（ 一 ）

今天我们来通过webpack前端构架工具去搭建一个vue的项目。首先来边学边做一些测试，之后会有第二篇、第三篇...

// 创建项目目录
mkdir webpack_todo
cd webpack_todo

npm 初始化

npm init 
// 之后会通过npm初始化我们的项目文件
// 随之生成一个package.json，我们开发的依赖包都会显示在这个里面哦

目录完善

-src
  - assets
       - images
           - 01.jpg
           - 02.jpg
           - 03.jpg
       - styles
           - test.css
           - test.style.styl
  - app.vue   // 模板文件
  - index.js  // 入口文件
-package.json
-webpack.config.js

安装依赖

cnpm install --save-dev vue vue-laoder webpack webpack-cli css-laoder vue-template-compiler 
// 之后目录下会出现一个`node_modules`的文件夹,该文件夹下面将会是我们所有的依赖包

完善文件内容

// app.vue
// vue组件的三元素
<template>
  <div id="app">{{test}}</div>
</template>

<script>
export default {
  data() {
    return {
      test: "test"
    };
  }
};
</script>

<style scoped>
#app{
    color: #ccc;
}
</style>

// index.js
import Vue from 'vue'              // 引入vue
import App from './app.vue'        // 引入app组件
import './assets/images/02.jpg'
import './assets/styles/test.css'
import './assets/styles/test-style.styl'

const root = document.createElement('div'); // 根节点
document.body.appendChild(root);

new Vue({
  render: (h)=> h(App)             // 将App渲染至根节点
}).$mount(root)                    // 挂载到根节点

// webpack.config.js
const path = require('path')
module.exports = {
    mode: 'development',
    entry: path.join(__dirname, 'src/index.js'),
    output:{
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader'        // 处理vue
          },
          {
            test: /\.css$/,              // 处理css
            use: [
              'style-loader',
              'css-loader'
            ]
          },
          {
            test: /\.(png|jpg|gif|svg|jpeg)$/,        // 处理图片
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 30000,
                  name: '[name]-[hash].[ext]'
                }
              }
            ]
          },
          {
            test: /\.styl$/,                // 处理 stylus
            use: [
              'style-loader',
              'css-loader',
              'stylus-loader'
            ]
          }
        ]
    }
}

• 记得npm安装所有的loader

// package.json
// 列出package.json
{
  "name": "webpack_todo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js" // 这里设置 npm run build 
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "style-loader": "^0.20.3",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "url-loader": "^1.0.1",
    "vue": "^2.5.16",
    "vue-loader": "^14.2.2",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.2.0",
    "webpack-cli": "^2.0.13"
  }
}

build打包一次

npm run build
// 会在dist目录下生成build.js 和一些图片文件

未完待续哦~~